<template>
  <van-list class="filmlist" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
    <items :data="list" />
  </van-list>
</template>

<script>
import items from '../ui/items.vue'
import { getFilmsApi } from '@/api/filmApi'
export default {
  name: 'nowplaying',
  components: {
    items,
  },
  data() {
    return {
      list: [],
      // 如果为false时则会执行load方法,load方法中实现数据的加载，如果加载的数据没有满屏，会连接触发load直到加载到满屏,数据加载中v-model会自动把它设置为true,就不会触发load
      loading: false,
      // 为true时，表示数据已经全部加载完毕，没有更多的新数据，loading不管为何值都不会触发load事件
      finished: false,
      // 指定页码数
      page: 1,
    }
  },
  mounted() {
    this.loading = true
    this.onLoad()
  },
  methods: {
    async onLoad() {
      // console.log('1111---nowplaying')
      let page = this.page
      let ret = await getFilmsApi(page)
      if (ret.data.films.length > 0) {
        // 追加数据
        this.list.push(...ret.data.films)
        // this.list = [...ret.data.films, ...this.list]
        // this.list = this.list.concat(ret.data.films)
        this.loading = false
        this.page++
      } else {
        this.$toast.success('没有更多的新数据了')
        this.finished = true
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.filmlist {
  margin-bottom: 50px;
}
</style>